<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0px;
    }
    /* 顶部部分 */
    .topnav{
        margin-top: 30px;
        margin-left: 20px;
        display: flex;
        flex-direction: row; 
		justify-content:flex-start;
    }
    .topnav img:nth-child(1){
        width: 20px;
        height: 20px;
    }
    /* 分割线 */
    .line1{
        height: 2px;
        background-color: #f2f4f8;
        margin-top: 30px;
    }
    /* 标题 */
    .title{
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #5e5e5e;
        font-size: 22px;
        font-weight: 600;
        margin-top: 25px;
    }
    /* 文本 */
    .text1{
        font-size: 18px;
        color: #5e5e5e;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
        margin-left: 10px;
        line-height: 25px;
    }
    .text2{
        font-size: 18px;
        color: #5e5e5e;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
        margin-left: 10px;
        line-height: 28px;
    }
    .picture{
        height: 280px;
        width: 100%;
        margin-top: 20px;
    }
    /* 底部导航 */
    .bottomnav{
        display: flex;
        justify-content: space-around;
    }
    .bottomnav>img{
        height: 30px;
        width: 30px;
        margin-top: 5px;
    }
    .bottomnav>p{
        margin-top: 10px;
        margin-left: -60px;
    }
</style>
<body>
    <div>
        <!-- 顶部部分 -->
        <div class="topnav">
            <img src="../jpg/返回.png" >
        </div>
        <!-- 分割线1 -->
        <div class="line1"></div>
    </div>
    <!-- 标题 -->
    <div class="title">
        <span>一套独特风格的iOS UI 模板，P</span>
        <span>SD源文件免费分享</span>
    </div>
    <!-- 文本 -->
    <span class="text1">之前很多人跟我提过说,问我,能不能分享些 UI 
        方面的内容,我说,当然可以,刚好最近也有些
        项目的 APP ,需要改版,自己也收集了不少素材
        但是看到这套 IOS 风格的模板,真的很喜欢,
        所以也分享给那些喜欢设计,特别是做 UI 设计的的朋友们
    </span>
    <span class="text2">这个是 PsD 的源文件,如果你想要获取全套 PSD
        源文件,请关注我们的公众号: web 前端开发,并
        且在公号里输入关键字“102”,则可以获取下
        载地址,进行下载此套源文件。
    </span>
    <img class="picture" src="../jpg/文章.png" >
    <!-- 底部导航 -->
    <div class="bottomnav"> 
        <img src="../jpg/分享.png" alt=""><p>分享</p>
        <img src="../jpg/收藏.png" alt=""><p>收藏</p>
        <img src="../jpg/探索.png" alt=""><p>探索</p>
    </div>
</body>
</html>